<template>
  <max-tabs :mode="mode"
            :fieldNames="fieldNames"
            v-model:options="options"
            v-model:currentKey="currentKey">
  </max-tabs>
</template>

<script>
import {defineComponent, ref, markRaw, defineAsyncComponent} from 'vue';

export default defineComponent({
  setup() {
    /**
     * 参数列表：
     * mode：选项模式（single-单例加载 multiple-多例懒加载）
     * fieldNames：字段配置
     * options：选项列表
     * currentKey：当前选项
     */
    const mode = ref('multiple');
    const fieldNames = ref({
      key: 'id',
      title: 'name',
      component: 'component',
      closable: 'closable'
    })
    const options = ref([
      {
        id: '1',
        name: '按钮测试页',
        component: markRaw(defineAsyncComponent(() => import('./views/ButtonTest.vue'))),
        closable: true
      },
      {
        id: '2',
        name: '输入测试页',
        component: markRaw(defineAsyncComponent(() => import('./views/InputTest.vue'))),
        closable: true
      },
      {
        id: '3',
        name: '表单测试页',
        component: markRaw(defineAsyncComponent(() => import('./views/ButtonTest.vue'))),
        closable: true
      },
      {
        id: '4',
        name: '弹窗测试页',
        component: markRaw(defineAsyncComponent(() => import('./views/ModalTest.vue'))),
        closable: true
      },
      {
        id: '5',
        name: '菜单测试页',
        component: markRaw(defineAsyncComponent(() => import('./views/ModalTest.vue'))),
        closable: true
      },
      {
        id: '6',
        name: '树形测试页',
        component: markRaw(defineAsyncComponent(() => import('./views/TreeTest.vue'))),
        closable: true
      },
      {
        id: '7',
        name: '表格测试页',
        component: markRaw(defineAsyncComponent(() => import('./views/TableTest.vue'))),
        closable: true
      },
    ]);
    const currentKey = ref('1');
    /**
     * 方法列表：
     */

    return {
      mode,
      fieldNames,
      options,
      currentKey
    };
  }
});
</script>

<style scoped>
</style>
